<template>
  <div :class="{'layout' : props.layout }">
    <div class="notice-list">
      <template v-if="tableData?.length > 0">
        <div class="notice-item"  v-for="item in tableData" :key="item.id" @click="showAll(item)">
          <el-icon class="left-icon"><ArrowRight /></el-icon>
          <div class="notice-title"><span v-if="item.top" class="is-top">顶</span><span class="aline_w">{{ item.title }}</span></div>
          <div class="right-info">
            <div class="time">{{ dayjs(item?.createdAt).format("YYYY-MM-DD") }}</div>
          </div>
        </div>
      </template>
      <el-empty v-else description="暂无数据" />
    </div>
    
    <el-dialog v-model="showAllVisible" title="消息通知" width="60%" class="notice-title">
      <div class="notice-title" >{{ currentNotice.title }}</div>
      <div class="bottom-info">
        <div class="from" v-if="currentNotice?.targetInfo?.departName"><span>来源：</span>{{currentNotice.targetInfo.departName}}</div>
        <div class="from" v-else-if="currentNotice?.targetInfo?.courseName"><span>来源：</span>{{currentNotice.targetInfo.courseName}}</div>
        <div v-else>系统</div>
        <div class="time">发布时间：{{ formatDate(currentNotice?.createdAt,"yyyy.MM.dd") }}</div>
        <div class="bottom-line"></div>
      </div>
      <el-scrollbar max-height="400px">
        <div class="notice-html" v-html="currentNotice.content"></div>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="showAllVisible = false">我知道了</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { formatDate } from '@/utils/tools'
import { ArrowRight } from '@element-plus/icons-vue';
import dayjs from 'dayjs'

const props = defineProps({
  noticeData: {
    type: Array,
    default: () => []
  }, 
 
})
const tableData = computed(() => props.noticeData)
console.log("tableData", tableData.value);

const currentNotice = ref({});
const showAllVisible = ref(false);
const showAll = (row) => {
  showAllVisible.value = true;
  currentNotice.value = row;
  //发送已读
}
</script>

<style scoped lang="scss">
.function-header{
  margin-top: px2rem(40);
  font-weight: normal;
  font-size: px2rem(24);
}
.notice-list{
  padding: px2rem(10);
}
.notice-item{
  padding: px2rem(15);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin-bottom: px2rem(10);
  cursor: pointer;
  display:flex;
  align-items: center;
  justify-content: space-between;
  border-radius: px2rem(2);
  .left-icon{
    color: #C9C9C9;
    font-size: px2rem(16);
    margin-right: px2rem(10);
  }
  .notice-title{
    font-size: px2rem(20);
    color: $black;
    /* font-weight: bold; */
    line-height: 1.5;
    position: relative;
    /* width: calc(100% - 0.8rem); */
    flex: 1;
    .read-state{
      position: absolute;
      left: px2rem(-8);
      top: px2rem(-8);
      width: px2rem(8);
      height: px2rem(8);
      border-radius: 50%;
      background: var(--el-color-danger);
    }
  }
  .notice-content {
    margin-top: px2rem(10);
    font-size: px2rem(16);
    color: $black;
    @include textEllipsis(24, 1);
  }
  .right-info{
    margin-left: px2rem(15);
    width: px2rem(100);
    font-size: px2rem(16);
    color: #555;
  }
  &:hover{
    .notice-title{
      color: $mainColor;
      .aline_w{
        background-size: 100% 1px;
      }
    }
  }
}

.notice-title{
  .notice-title{
    font-size: px2rem(24);
    text-align: center;
    color: $black;
    margin-top: px2rem(10);
  }
  .notice-html{
    /* ::v-deep *{
      font-size: px2rem(16) !important;
      line-height: 1.5 !important;
    } */
  }
  .bottom-info{
    margin-top: px2rem(5);
    display: flex;
    justify-content: space-between;
    font-size: px2rem(16);
    border-bottom: 1px solid #D7D7D7;
    padding-bottom: px2rem(15);
    position: relative;
    margin-bottom: px2rem(15);

    .from{
      color: $black;
      span{
        color: #666;
      }
    }
    .time{
      color: #666;
    }
  }
  .bottom-line {
    content: "";
    display: block;
    width: 1.42rem;
    height: 0.02rem;
    background-color: $mainColor;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>